<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>常见的页面架构及样式布局</title>
		<link rel="stylesheet" type="text/css" href="./task1-7.css">
	</head>
	<body>
		<!-- 导航 -->
		<header id="header" class="clear">
			<h1 class="logo">
				<img src="img/header-logo.png">
				新世界
			</h1>
			<ul class="nav">
				<li class="active"><a href="">首页</a></li>
				<li><a href="#">最新活动</a></li>
				<li><a href="#">项目介绍</a></li>
				<li><a href="#">爱心社区</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#"><img src="img/header-user.png">登录</a></li>
			</ul>
		</header>
		<div class="container">
			<section class="banner">
				<div class="inner">
					<h1>Time of new life</h1>
					<p>新时代，年轻的人们让我们一起</p>
					<p>体验新生活，享受新生活</p>
					<a class="enjoy" href="">开始体验</a>
				</div>
			</section>
			<section class="list">
				<ul class="clear">
					<li class="item">
						<img src="img/advancement-1.png" alt="">
						<p>
							打造全新世界观，让你更爱你的生活
						</p>
					</li>
					<li class="item">
						<img src="img/advancement-2.png" alt="">
						<p>
							丰富多彩的公益活动，发挥新世界的主人公意识
						</p>
					</li>
					<li class="item">
						<img src="img/advancement-3.png" alt="">
						<p>
							时尚的新理念，超前体验未知的生活
						</p>
					</li>
					<li class="item">
						<img src="img/advancement-4.png" alt="">
						<p>
							完善的培养机制，培养你全新的世界观
						</p>
					</li>
				</ul>
			</section>
			<section class="about">
				<img src="img/question-logo.png" alt="">
				<p>关于新世界，你不知道的还有什么？</p>
			</section>
			<section class="city">
				<h1>查找新世界城市活动信息</h1>
				<p> 每个城市都有不同的活动信息，请自主查询您所需要了解的城市！</p>
				<div class="form">
					<form action="" method="get">
						<select name="country" id="">
							<option value="china">中国</option>
							<option value="japan">日本</option>
							<option value="US">美国</option>
						</select>
						<select name="province" id="">
							<option value="">省份</option>
							<option value="liaoning">辽宁</option>
							<option value="beijing">帝都</option>
							<option value="shanghai">魔都</option>
							<option value="hebei">河北</option>
							<option value="henan">河南</option>
						</select>
						<select name="city" id="">
							<option value="">城市</option>
							<option value="">北京</option>
							<option value="">上海</option>
							<option value="">沈阳</option>
							<option value="">杭州</option>
							<option value="">广州</option>
						</select>
						<input class="sub-btn" type="submit" value="搜索">
					</form>
				</div>
			</section>
			<section class="action">
				<div class="pictures clear">
					<div class="picture">
						<img src="img/beijing.png" alt="">
						<h3>北京活动</h3>
						<p>新社区大联盟</p>
					</div>
					<div class="picture">
						<h3 class="shanghai">上海活动</h3>
						<p>夜上海新景观探索</p>
						<img src="img/shanghai.png" alt="">
					</div>
					<div class="picture">
						<img src="img/shenzhen.png" alt="">
						<h3>深圳活动</h3>
						<p>全新海岸线观点站</p>
					</div>
					<div class="picture">
						<img src="img/hongkong.png" alt="">
						<h3>香港活动</h3>
						<p>奢侈消费大派送</p>
					</div>
				</div>
			</section>
			<section class="slides clear">
				<div class="slide clear">
					<div class="time clear">
						<img src="img/slide.jpg" alt="">
						<div class="slide-inner">
							<h1>新世界</h1>
							<h1 class="big-time">TIME</h1>
							<p>@新世界 - 北京</p>
							<p>2016.04.01</p>
						</div>
					</div>
					
					<div class="slide-desc">
						<h2>新世界</h2>
						<span>01</span>
						<p>新世界新世新世界新世界新世界新世界新世界新新世界新世新世界新世界新世界新世界新世界新新世界新世新世界新世界新世界新世界新世界新新世界新世新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界新世界界</p>
						<a href="#">更多详情</a>
					</div>
				</div>
				<ul id="page-tab">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
			<section class="new-time clear">
				<div class="colum-3 colum-left">
					<div class="colum-inner">
						<p>新时代 <br />关于爱生活的我们</p>
						
						<a href="">查看更多</a>
					</div>
				</div>
				<div class="colum-3 colum-center">
					<div class="colum-inner">
						<p>新时代 <br />关于爱生活的我们</p>
						
						<a href="">查看更多</a>
					</div>
				</div>
				<div class="time-img"><img src="img/model2.png" alt=""></div>
			</section>
			<section class="join">
				<div class="join-desc">
					<h1>成为我们的志愿者</h1>
					<p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情
						<br />那就不要犹豫，快来加入我们，成为改变所有人生活的人
					</p>
				</div>
				<div class="register clear">
					<div class="register-info">
						<ul>
							<li class="clear">
								<h4>新世界志愿者协议</h4>
								<p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法，并且本着平等资源的原则 ......</p>
								<a href="#" class="more">more</a>
							</li>
							<li class="clear">
								<h4>新世界志愿者协议</h4>
								<p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法，并且本着平等资源的原则 ......</p>
								<a href="#" class="more">more</a>
							</li>
							<li class="clear">
								<h4>新世界志愿者协议</h4>
								<p>加入新世界志愿者的人员必须遵守中华人民共共和国的相关法律法，并且本着平等资源的原则 ......</p>
								<a href="#" class="more">more</a>
							</li>
						</ul>
					</div>
					<div class="register-form clear">
						<form action="">
							<div class="form-list">
								<input type="text" id="username" name="username" placeholder="姓名">
							</div>
							<div class="form-list">
								<input type="text" id="username" name="username" placeholder="年龄">
							</div>
							<div class="form-list">
								<input type="text" id="username" name="username" placeholder="联系方式">
							</div>
							<div class="form-list">
								<input type="text" id="username" name="username" placeholder="联系地址">
							</div>
							<div class="form-list textarea">
								<textarea name="" id="" cols="30" rows="10" placeholder="请简单描述您梦想的生活"></textarea>
							</div>
							<div class="form-list" id="sub-btn1">
								<button class="btn-reg">提交申请</button>
							</div>
						</form>
					</div>
				</div>
			</section>
		</div>
		<footer>
			<div class="email">
				<h2>联系我们</h2>
				<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br />
					也可以通过以下任何方式关注我们动态
				</p>
				<div class="send-email clear">
					<form action="">
						<input type="text" placeholder="someone@email.com">
						<button>提交</button>
					</form>
				</div>
				<ul>
					<li><img src="img/qq.png" alt=""></li>
					<li><img src="img/weibo.png" alt=""></li>
					<li><img src="img/twitter.png" alt=""></li>
					<li><img src="img/globe.png" alt=""></li>
				</ul>
			</div>
			<div class="copyright">
				<span>@2016新世界</span>
				<a href="#header">Back to top</a>
			</div>
		</footer>
	</body>
</html>
</body>
</html>